<template>
	<div class="page">
		<global-header title="代理列表" @back="$router.back()" />
		<main class="page-main">
			<div class="h-[60px] bg-white">
				<van-search @search="handleSearch" @clear="handleSearch" @click-left-icon="handleSearch"
					v-model="searchParams.Nickname" placeholder="请输入玩家用户名/昵称/备注" shape="round" />
			</div>
			<div class="bg-white">
				<!-- 表格部分 -->
				<!-- 表头 -->
				<div class="row-start-center text-[14px] text-[#888] pb-[8px] px-[15px]"
					style="border-bottom: 1px solid #E4E4E4;">
					<div class="w-[30%]">用户名</div>
					<div class="w-[36%]">下级代理人数</div>
					<div class="w-[24%]">下线人数</div>
					<div class="w-[15%]">操作</div>
				</div>
				<!-- 表内容 -->
				<div class="page-main overflow-y-auto" ref="scrollRef">
					<div class="bg-white px-[15px]">
						<scroll-list emptyImage v-model:loading="state.loading" v-model:refresh="state.refresh"
							:finished="state.finished" :length="list.length" @load="load">
							<template v-for="(item, index) in list">
								<AgentItem :item="item" :last="index >= list.length - 2" @more="() => handleMore(item)" @toSubAgent="() => handleToSubAgent(item)" @openSubList="() => openSubList(item)">

								</AgentItem>
							</template>
						</scroll-list>
					</div>
				</div>
			</div>
		</main>
		<AgentMorePopup @update="search" ref="agentMorePopupRef" :info="agentInfo" />
		<AgentOfflinePopup ref="agentOfflinePopupRef" :info="agentInfo" />
	</div>
</template>
<route>
  {
    name: "admin-user-agent",
    meta: {
      pageIndex: 3,
    }
  }
</route>
<script setup lang="ts">
import AgentItem from "./components/agent/agent-item.vue";
import AgentMorePopup from "./components/agent/agent-more-popup.vue"
import AgentOfflinePopup from "./components/agent/agent-offline-popup.vue"
import { reqAgentList } from '@/api/user'
import { useList } from "@/hooks/useList";
import { debounce } from "lodash-es";
const router = useRouter();
const route = useRoute();
interface Params {
	Nickname?: string;
	ParentId?: string;
}
const searchParams = reactive({
	Nickname: ''
})

const agentMorePopupRef = ref();
const agentInfo = ref<AgentMo | null>(null);
const agentOfflinePopupRef = ref()
// 获取参数
const getParams = () => {
	const params: Params = {
		Nickname: ''
	}
	if (searchParams.Nickname) {
		params.Nickname = searchParams.Nickname
	}
	if (route.query.id && !isNaN(Number(route.query.id as string))) {
		params.ParentId = route.query.id as string;
	}
	return params
}

// 获取列表
const { scrollRef, state, list, getData, search, load } = useList<AgentMo, Params>(
	reqAgentList,
	getParams
);

// 搜索 需要加防抖延时500毫秒
const handleSearch = debounce(() => {
	search();
}, 500);

onMounted(() => {
	getData()
})

function handleMore(item: AgentMo) {
	agentInfo.value = item
	nextTick(() => {
		agentMorePopupRef.value?.open()
	})
}

watch(
  () => route.query.id,
  () => {
    getData();
  }
);

const handleToSubAgent = (item: AgentMo) => {
	agentInfo.value = item
	nextTick(() => {
    router.push({
      path: "/admin/user/agent",
      query: {
        id: item.UserId,
        level: item.Level
      }
    });
  });
}

const openSubList = (item: AgentMo) => {
	agentInfo.value = item
		nextTick(() => {
			agentOfflinePopupRef.value?.open();
	});
}
</script>
